<template>
  <div class="classify-view">
    <van-row>
      <!-- 左边侧向导航栏 -->
      <van-col span="6">
        <van-sidebar v-model="nowClassify">
          <van-sidebar-item v-for="item in baseStore.CatData" :key="item.cat_id" :title="item.cat_name" :name="item.cat_id" />
        </van-sidebar>
      </van-col>
      <!-- 右边分类内容 -->
      <van-col span="18" class="classify-list">
        <van-image
         width="100%"
         :src="baseStore.Classify.title_img"
        />
        <div class="classify-title">• {{ baseStore.Classify.title }} •</div>
        <van-row :gutter="[0,20]">
          <van-col 
           span="8" 
           v-for="item in baseStore.Classify.data" 
           :key="item.id"
           @click="router.push({ path: '/classifysmall', query: { product_content: item.product_content }})"
          >
            <van-image
             width="100%"
             :src="item.product_img"
            />
            <div class="classify-text">{{ item.product_content }}</div>
          </van-col>
        </van-row>
      </van-col>
    </van-row>
  </div>
</template>

<script setup lang="ts">
  import { useBaseStore } from '../../store';
  
  let baseStore = useBaseStore();
  let router = useRouter();

  let nowClassify = ref(0)

  watch(nowClassify,Value => { baseStore.getClassifyDataList(baseStore.CatData[Value].cat_id); },
  );

</script>

<style scoped lang="less">
  .classify-view{
    .van-sidebar{
      width: 100%;
      height: 100vh;
      text-align: center;
      overflow-y: scroll;
      &::-webkit-scrollbar{
        width: 0px;
      }
    }
    .classify-list{
      padding: 12px;
      .classify-text{
        text-align: center;
      }
    }
    .classify-title{
      text-align: center;
      margin: 20px 0;
    }
  }
</style>
